<template>
    <div id="collectVenue">
        <div class="title">
            <div class="left">场馆收藏</div>
            <div class="search">
                <el-input size="mini" placeholder="请输入内容" v-model="searchInput"></el-input>
                <div><i class="el-icon-search"></i></div>
            </div>
        </div>
        <!-- 列表 -->
        <div class="content">
            <div class="list" @mousemove="mousemove()" @mouseout="mouseout()">
                <img src="../../image/beijingtu.png" alt="" class="left">
                <div class="right">
                    <div class="headline">音乐的基本知识和技巧</div>
                    <div class="type">课程类型：音乐</div>
                    <div class="teacher" style="margin-top: 6%;">主讲老师：张老师</div>
                    <div class="button" v-show="mouseShow">
                        <div class="viewDetails">查看详情</div>
                        <div class="cancelCollection" @click="cancelCollection">取消收藏</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 分页 -->
        <div class="paging">
            <div class="page" @click="homePage">首页</div>
            <!-- v-show="pageSize > 0"
            :total="listData.length"
            @pagination="getListData" -->
            <el-pagination background
                :total="45"
                layout="prev, pager, next"
                prev-text="上一页"
                next-text="下一页"
                :page-size="pageSize"
                @current-change="clickChange">
            </el-pagination>
            <div class="page" @click="trailingPage">尾页</div>
        </div>
        <!-- 取消收藏 -->
        <div id="cancelCollection" v-show="cancelShow">
            <div class="prompt">
                <div class="top">删除消息<i class="el-icon-circle-close" style="color: #F19417;" @click="hideCollection"></i></div>
                <div class="center">您确定要删除收藏的活动吗？</div>
                <div class="bottom">
                    <div class="confirm" @click="confirm">确定</div>
                    <div class="cancel" @click="cancel">取消</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            searchInput: "",// 搜索框输入的内容
            mouseShow: false, // 鼠标划入默认隐藏
            pageNum: 1, //显示第几页
            pageSize: 6, //一页的数据数量
            cancelShow: false, // 取消收藏默认隐藏
        };
	},
    mounted(){
    },
	methods: {
        // 鼠标划入
        mousemove(){
            this.mouseShow = true
        },
        // 鼠标划出
        mouseout(){
            this.mouseShow = false
        },
        // 显示取消收藏弹框
        cancelCollection(){
            this.cancelShow = true
        },
        // 关闭取消收藏弹框
        hideCollection(){
            this.cancelShow = false
        },
        // 确定取消收藏
        confirm(){
            this.cancelShow = false
            this.$message({
                message: "取消收藏成功",
                type: 'success'
            });
        },
        // 取消收藏
        cancel(){
            this.cancelShow = false
        },
        // 首页
        homePage() {
            this.clickChange(1)
        },
        // 当前页
        clickChange(val) {
            this.pageNum = val;
            // console.log(this.pageNum)
            // this.getListData();
        },
        // 尾页
        trailingPage(val) {
            this.pageNum = val;
            // console.log(this.pageNum)
            // this.getListData();
        },
    },
    watch: {},
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){
    #collectVenue{
        padding: 3% 5%;
        .title{
            width: 100%;
            font-size: 24px;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
            display: flex;
            .left{
                flex: 3;
            }
            // 搜索框
            .search{
                flex: 1;
                display: flex;
                .el-input{
                    flex: 4;
                }
                div{
                    height: 80%;
                    flex: 1;
                    background: #DDDDDD;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
        // 列表
        .content{
            width: 100%;
            // height: 530px;
            height: 450px;
            overflow: auto;
            margin-top: 2%;
            display: flex;
            flex-wrap: wrap; // 自动换行
            .list:hover{
                box-shadow: 0px 5px 10px 0px rgba(64, 45, 20, 0.15);
            }
            .list{
                width: 46%;
                height: 160px;
                margin: 1% 2%;
                border-radius: 10px;
                display: flex;
                .left{
                    flex: 1;
                    width: 50%;
                    border-radius: 10px;
                }
                .right{
                    flex: 1;
                    width: 46%;
                    margin: 0% 2%;
                    .headline{
                        font-size: 18px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        margin: 10% 0% 9% 0%;
                        // 单行溢出隐藏
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                    }
                    .type,.teacher{
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #888888;
                    }
                    .button{
                        display: flex;
                        margin-top: 12%;
                        div{
                            flex: 1;
                            margin: 0% 3%;
                            height: 30px;
                            font-size: 12px;
                            // 水平垂直居中
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color: white;
                        }
                        .viewDetails{
                            background: #F19417;
                        }
                        .cancelCollection{
                            background: #888;
                        }
                    }
                }
            }
        }
        // 分页
        .paging{
            width: 100%;
            margin-top: 5%;
            // 水平垂直居中
            display: flex;
            justify-content: center;
            align-items: center;
            /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
                background-color: #F19417;
            }
            .page{
                width: 7%;
                text-align: center;
                line-height: 30px;
                background: #F0F0F0;
                border-radius: 2px;
                margin: 0% 0.5%;
            }
        }
        // 取消收藏
        #cancelCollection{
            width: 100%;
            height: 916px;
            background: rgba(56, 46, 46, 0.2);
            position: absolute;
            top: 0%;
            left: 0%;
            .prompt{
                width: 22%;
                background: #FFFFFF;
                border-radius: 5px;
                margin: 15% 0% 0% 35%;
                text-align: center;
                .top{
                    font-size: 18px;
                    font-weight: 500;
                    line-height: 40px;
                    padding-top: 3%;
                    i{
                        float: right;
                        margin: 0% 3% 0% 0%;
                    }
                }
                .center{
                    font-size: 14px;
                    margin: 10% 0%;
                }
                .bottom{
                    width: 100%;
                    display: flex;
                    padding-bottom: 10%;
                    div{
                        width: 20%;
                        line-height: 30px;
                        border-radius: 5px;
                    }
                    .confirm{
                        margin: 0% 5% 0% 25%;
                        background: #F19417;
                        color: white;
                    }
                    .cancel{
                        background: #ddd;
                    }
                }
            }
        }
    }
}



@media screen and (max-width: 1400px){
    #collectVenue{
        padding: 2% 4%;
        .title{
            width: 100%;
            font-size: 22px;
            padding-bottom: 1.5%;
            border-bottom: 1px solid #ddd;
            display: flex;
            .left{
                flex: 3;
            }
            // 搜索框
            .search{
                flex: 1;
                display: flex;
                .el-input{
                    flex: 4;
                }
                div{
                    height: 80%;
                    flex: 1;
                    background: #DDDDDD;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
        // 列表
        .content{
            width: 100%;
            // height: 530px;
            height: 450px;
            overflow: auto;
            margin-top: 1.5%;
            display: flex;
            flex-wrap: wrap; // 自动换行
            .list:hover{
                box-shadow: 0px 5px 10px 0px rgba(64, 45, 20, 0.15);
            }
            .list{
                width: 46%;
                height: 140px;
                margin: 1% 2%;
                border-radius: 10px;
                display: flex;
                .left{
                    flex: 1;
                    width: 50%;
                    border-radius: 10px;
                }
                .right{
                    flex: 1;
                    width: 46%;
                    margin: 0% 2%;
                    .headline{
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        margin: 8% 0% 7% 0%;
                        // 单行溢出隐藏
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                    }
                    .type,.teacher{
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #888888;
                    }
                    .button{
                        display: flex;
                        margin-top: 10%;
                        div{
                            flex: 1;
                            margin: 0% 3%;
                            height: 24px;
                            font-size: 10px;
                            // 水平垂直居中
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color: white;
                        }
                        .viewDetails{
                            background: #F19417;
                        }
                        .cancelCollection{
                            background: #888;
                        }
                    }
                }
            }
        }
        // 分页
        .paging{
            width: 100%;
            margin-top: 4%;
            // 水平垂直居中
            display: flex;
            justify-content: center;
            align-items: center;
            /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
                background-color: #F19417;
            }
            .page{
                width: 7%;
                text-align: center;
                line-height: 30px;
                background: #F0F0F0;
                border-radius: 2px;
                margin: 0% 0.5%;
            }
        }
        // 取消收藏
        #cancelCollection{
            width: 100%;
            height: 825px;
            background: rgba(56, 46, 46, 0.2);
            position: absolute;
            top: 0%;
            left: 0%;
            z-index: 1;
            .prompt{
                width: 20%;
                background: #FFFFFF;
                border-radius: 5px;
                margin: 15% 0% 0% 35%;
                text-align: center;
                .top{
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 40px;
                    padding-top: 2%;
                    i{
                        float: right;
                        margin: 0% 3% 0% 0%;
                    }
                }
                .center{
                    font-size: 12px;
                    margin: 8% 0%;
                }
                .bottom{
                    width: 100%;
                    display: flex;
                    padding-bottom: 10%;
                    div{
                        width: 20%;
                        line-height: 26px;
                        border-radius: 5px;
                    }
                    .confirm{
                        margin: 0% 5% 0% 25%;
                        background: #F19417;
                        color: white;
                    }
                    .cancel{
                        background: #ddd;
                    }
                }
            }
        }
    }
}
</style>